<template>
    <div>
        <div>
            <div>
                <el-input v-focus prefix-icon="el-icon-search" placeholder="请输入菜单名称"
                          style="width: 300px;margin-right: 10px" v-model="name"
                          @keydown.enter.native="doSearch" clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="doSearch" >搜索</el-button>
                <el-button type="success" @click="showAddOneMenuView">添加一级菜单</el-button>
                <el-dialog
                        title="添加一级菜单"
                        :visible.sync="dialogVisible"
                        width="30%">
                    <el-form ref="addMenu" :model="addMenu" label-width="100px" :rules="addMenuRules">
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="addMenu.name" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="路径" prop="url">
                            <el-input v-model="addMenu.url" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="icon" prop="iconCls">
                            <el-input v-model="addMenu.iconCls" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="是否启用">
                            <el-switch v-model="addMenu.enabled" style="width:300px"
                                       active-text="启用"
                                       inactive-text="禁用"></el-switch>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addOneMenu">确 定</el-button>
  </span>
                </el-dialog>
            </div>
        </div>
        <div>
            <el-table
                    :data="menus"
                    border
                    :highlight-current-row="true"
                    style="width: 100%;margin-top: 10px"
                    row-key="id"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    v-loading="loading">
                <el-table-column
                        prop="name"
                        label="名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="路径"
                        width="180" align="center">
                </el-table-column>
                <el-table-column
                        prop="iconCls"
                        label="icon" align="center">
                    <template slot-scope="scope">
                        <i :class="scope.row.iconCls" style="color: blue;margin-right: 10px"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="enabled"
                        label="是否启用" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
                        <el-tag type="danger" v-else>未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="url" align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showAddSubmenuView(scope.row.id)">添加子菜单</el-button>
                        <el-button type="primary" icon="el-icon-edit" circle @click="showUpdadeMenuView(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteMenu(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    title="添加子菜单"
                    :visible.sync="addSubmenuDialogVisible"
                    width="30%">
                <el-form ref="addSubmenu" :model="addSubmenu" label-width="120px" :rules="addMenuRules">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="addSubmenu.name" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="后台接口路径" prop="url">
                        <el-input v-model="addSubmenu.url" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="path">
                        <el-input v-model="addSubmenu.path" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="组件名" prop="component">
                        <el-input v-model="addSubmenu.component" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="icon" prop="iconCls">
                        <el-input v-model="addSubmenu.iconCls" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="addSubmenu.enabled" style="width:300px"
                                   active-text="启用"
                                   inactive-text="禁用"></el-switch>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="addSubmenuDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSubmenuInfo">确 定</el-button>
  </span>
            </el-dialog>

            <el-dialog
                    title="修改菜单"
                    :visible.sync="updateDialogVisible"
                    width="30%">
                <el-form ref="updadeMenu" :model="updadeMenu" label-width="120px" :rules="addMenuRules">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="updadeMenu.name" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="icon" prop="iconCls">
                        <el-input v-model="updadeMenu.iconCls" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="updadeMenu.enabled" style="width:300px"
                                   active-text="启用"
                                   inactive-text="禁用"></el-switch>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="addSubmenuDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateMenuInfo">确 定</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysCfg",
        data() {
            return {
                menus: [],
                name: '',
                dialogVisible: false,
                addMenu: {
                    name: '',
                    url: '',
                    iconCls: '',
                    enabled: true
                },
                menuTitle:'',
                addMenuRules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请输入路径', trigger: 'blur'}
                    ],
                    component: [
                        {required: true, message: '请输入组件名称', trigger: 'blur'}
                    ],
                    path: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                },
                addSubmenuDialogVisible:false,
                addSubmenu:{
                    name: '',
                    url: '',
                    path:'',
                    component:'',
                    iconCls: '',
                    enabled: true,
                    parentId:null
                },
                updateDialogVisible:false,
                updadeMenu:{
                    name:'',
                    enabled: true,
                    iconCls:''
                },
                loading:false
            }
        },
        mounted(){
          this.getAllMenus();
        },
        methods:{
            getAllMenus(){
                this.loading =true;
                this.getRequest("/api/system/cfg/menu/").then(resp=>{
                    if(resp){
                        this.loading = false;
                        this.menus = resp;
                    }
                })
            },
            //打开添加一级菜单弹框
            showAddOneMenuView(){
                this.addMenu = {
                    name: '',
                    url: '',
                    iconCls: '',
                    enabled: true
                };
                this.dialogVisible = true;
            },
            //添加一级菜单
            addOneMenu(){
                this.$refs.addMenu.validate((valid) => {
                    if (valid) {
                        this.postRequest('/api/system/cfg/menu/',this.addMenu).then(resp=>{
                            if(resp){
                                this.dialogVisible= false;
                                this.getAllMenus();
                            }
                        })
                    } else {
                        this.$message.error('请输入必须字段');
                        return false;
                    }
                });
            },
            //打开添加子菜单的弹框
            showAddSubmenuView(id){
                this.addSubmenu={
                        name: '',
                        url: '',
                        path:'',
                        component:'',
                        iconCls: '',
                        enabled: true,
                        parentId:null
                };
                //将当前的id作为子菜单的父级id
                this.addSubmenu.parentId = id;
                this.addSubmenuDialogVisible = true;
            },
            //添加子菜单
            addSubmenuInfo(){
                this.$refs.addSubmenu.validate((valid) => {
                    console.log(this.addSubmenu)
                    if (valid) {
                        this.postRequest('/api/system/cfg/menu/addSubmenu', this.addSubmenu).then(resp => {
                            if (resp) {
                                this.addSubmenuDialogVisible = false;
                                this.getAllMenus();
                            }
                        })
                    } else {
                        this.$message.error('请输入必须字段');
                        return false;
                    }
                });
            },
            //删除菜单
            deleteMenu(data){
                if(data.children.length> 0){
                    this.$message.error("父菜单删除失败")
                    return
                }
                this.$confirm('此操作将永久删除【'+ data.name+ '】菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                   this.deleteRequest('/api/system/cfg/menu/?id=' + data.id).then(resp=>{
                       if(resp){
                           this.getAllMenus();
                       }
                   })
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '已取消删除'
                    });
                });
            },
            //打开修改弹框
            showUpdadeMenuView(data){
                console.log(data)
                this.updateDialogVisible = true;
                Object.assign(this.updadeMenu,data);
            },
            //修改
            updateMenuInfo(){
                this.$refs.updadeMenu.validate((valid) => {
                    if (valid) {
                        this.putRequest('/api/system/cfg/menu/', this.updadeMenu).then(resp => {
                            if (resp) {
                                this.updateDialogVisible = false;
                                this.getAllMenus();
                            }
                        })
                    } else {
                        this.$message.error('请输入必须字段');
                        return false;
                    }
                });
            },
            //根据菜单名称搜索
            doSearch(){}
        }

    }
</script>

<style scoped>

</style>